<template>
    <div class="app-nav">
        <div class="w r-box">
            <img src="../assets/logo.png" alt="剑鱼">
            <div class="right">
                <router-link class="nav-link" :class="{'now': now === '首页'}" to="/">首页</router-link>
                <router-link class="nav-link" :class="{'now': now === '应用场景'}" to="/scene">应用场景</router-link>
                <el-dropdown placement="bottom-end" trigger="click">
                     <span class="el-dropdown-link nav-link">
                        控制台<i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>开发者申请</el-dropdown-item>
                        <el-dropdown-item divided>开发文档</el-dropdown-item>
                        <el-dropdown-item divided>订阅Pro</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button>登录</el-button>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'nav',
    props: ['name'],
    data: function () {
      return {}
    },
    computed: {
      now: function () {
        console.log('--this.$route.name--', this.name)
        let name = '首页'
        switch (this.name) {
          case '/': name = '首页';break;
          case 'scene': name = '应用场景';break;
          default: name = '控制台'
        }
        return name
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {} // 函数
  }
</script>
<style lang='scss'>
    .r-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
        justify-content: space-between;
    }

    .app-nav {
        box-sizing: border-box;
        height: 100px;
        background-color: white;
        border-bottom: 1px solid #d2d2d2;
        .nav-link {
            font-size: 18px;
            color: #333333;
            margin-right: 60px;
            padding: 11px 0;
            &.now {
              color: #2cb7ca;
              border-bottom: 2px solid #2cb7ca;
            }
            &:hover {
                color: #2cb7ca;
                border-bottom: 2px solid #2cb7ca;
            }
        }
    }
</style>
